<script>
import AddressSelector from '@/components/AddressSelector'
import { getBank } from "@/api/basic"
import { value } from '@/utils/kris_utils'
export default {
    components:{
        AddressSelector
    },
    props:{
        fallback:{
            type:String,
            default:'-'
        },
        isEditing:false
    },
    computed:{
        valueFormatted(){
            if(!Array.isArray(this.$attrs.value) || this.$attrs.value.length <= 0)
                return this.fallback
            
            return this.$attrs.value
                .map(item => item.label)
                .join('')
        },
        listeners(){
            let listenres = {...this.$listeners}
            return listenres
        },
        attrs(){
            let attrs = {...this.$attrs}
            attrs['style'] = "width: 100%;"
            return attrs
        }
    },
    methods:{

    }
}
</script>

<template>
    <div>
        <AddressSelector 
            v-show="isEditing" 
            v-on="listeners"
            v-bind="attrs"
        />
        <span v-if="!isEditing">{{ valueFormatted }}</span>
    </div>
</template>